<style>
.logManagement {
  padding: 10px;
  min-height: 600px;
}
</style>

<template>
  <div class="manage-wrap">
    <div class="operation-panel">
      <Row>
        <Col span="24">
          <Poptip width="400" title="搜索" placement="bottom-end" class="float-r">
            <Button type="primary" size="large" icon="ios-search">搜 索</Button>
            <div style="text-align:center" slot="content">
              <Form
                ref="searchForm"
                :model="searchForm"
                :label-width="80"
                value="true"
                style="min-width:200px;padding-top:20px;border-top:1px solid #a3adba;border-bottom:1px solid #a3adba;"
              >
                <Row>
                  <Form-item label="手机号">
                    <Input v-model="searchForm.mobile"></Input>
                  </Form-item>
                </Row>
              </Form>
              <Row>
                <Button
                  style="margin-left:5px;margin-top:10px;float:right;background-color: #5bc0de;color:#fff"
                  size="small"
                  @click="doSearchTableList"
                >确定</Button>
                <Button style="float:right;margin-top:10px;" size="small" @click="resetSearch">重置</Button>
              </Row>
            </div>
          </Poptip>
        </Col>
      </Row>
    </div>
    <!--table-->
    <Row>
      <Table stripe size="small" :columns="tableColums" :data="tableData"></Table>
    </Row>
    <Row>
      <Page
        :total="total"
        :page-size="currentPageSize"
        :current="currentPage"
        @on-change="changeCurrentPage"
        @on-page-size-change="changePageSize"
        show-total
        show-sizer
        style="float:right;margin-top:10px"
      ></Page>
    </Row>
  </div>
</template>

<script>
import Cookies from "js-cookie";
import { getPushLogList } from "@/api/monitor";
export default {
  name: "log",
  data() {
    return {
      tableColums: [
        {
          type: "index",
          width: 60,
          title: "序号",
          align: "center"
        },
        {
          align: "center",
          title: "手机号/微信id",
          key: "msgMobile"
        },
        {
          align: "center",
          title: "推送方式",
          key: "msgType",
          render: (h, params) => {
            const row = params.row;
            let name = this.getMsgType(row.msgType);
            let color = this.getMsgTypeColor(row.msgType);
            return h(
              "Tag",
              {
                props: {
                  color: color
                }
              },
              name
            );
          }
        },
        {
          align: "center",
          title: "推送内容",
          key: "msgDetail"
        },
        {
          align: "center",
          title: "是否成功",
          key: "resultCode",
          render: (h, params) => {
            const row = params.row;
            let name = row.resultCode == "0" ? "成功" : "失败";
            return h(
              "span",
              {
                style: {
                  color: row.resultCode == "0" ? "#19be6b" : "#ed4014"
                }
              },
              name
            );
          }
        },
        {
          align: "center",
          title: "返回结果",
          key: "resultMsg"
        },
        {
          align: "center",
          title: "推送时间",
          key: "joinDate"
        }
      ],
      tableData: [],
      total: 0,
      currentPage: 1,
         currentPageSize: 10,
      btnLoading: false,
      searchForm: {
        mobile: "",
        current: 1,
        size: 10
      }
    };
  },
  created() {},
  mounted() {
    this.getTableList();
  },
  methods: {
    resetSearch() {
      this.searchForm.mobile = "";
    },
    doSearchTableList() {
      this.currentPage = 1;
      this.getTableList();
    },
    async getTableList() {
      this.searchForm.current = this.currentPage;
         this.searchForm.size = this.currentPageSize;
      const params = this.searchForm;
      const result = await getPushLogList(params);
      if (result.code == 0) {
        let res = result.data;
        this.total = res.total;
        this.tableData = res.records;
      }
    },
    changeCurrentPage(num) {
      this.currentPage = num;
      this.getTableList();
    },
     changePageSize(pageSize) {
      this.currentPageSize = pageSize;
      this.getTableList();
    },
    getMsgType(type) {
      let msgType = "";
      if (type == 1) {
        msgType = "短信";
      } else if (type == 2) {
        msgType = "语音";
      } else if (type == 3) {
        msgType = "微信";
      }
      return msgType;
    },
    getMsgTypeColor(type) {
      let color = "default";
      if (type == 1) {
        color = "magenta";
      } else if (type == 2) {
        color = "orange";
      } else if (type == 3) {
        color = "success";
      }
      return color;
    }
  }
};
</script>
